Adding Tailwind CSS to VitePress

How to add Tailwind CSS to a VitePress project.

In the VitePress Theme File

To get started, you'll need to either create or access your project's ./docs/.vitepress/theme directory.

Inside the theme directory create or access your VitePress theme index.js file. Here's some example code that includes a Vue/Vite project's Tailwind CSS file:

                            
                                // .docs/.vitepress/theme/index.js

                                import DefaultTheme from 'vitepress/theme'
                                import '../../../src/index.css' // a Tailwind CSS file

                                export default DefaultTheme
                            
                        

Example Tailwind CSS File

And just for sake of completeness, the ./src/index.css file would look something like this:

                            
                                /* ./src/index.css */
                                
                                @tailwind base;
                                @tailwind components;
                                @tailwind utilities;
                            
                        

Including VitePress Files in Tailwind

The last step needed, allows Tailwind CSS's engine to be aware of the VitePress files that will have Tailwind CSS classes in them. This is done using a Tailwind CSS config file, usually located at ./tailwind.config.js. Go ahead and open up the ./tailwind.config.js file, and add the following line of code to the content array:

                            
                                // ./tailwind.config.js
                                
                                module.exports = {

                                    content: [
                                        // ...
                                        // Add this line to include VitePress files in TWCSS
                                        "./docs/**/*.{md,html,js,vue}",
                                    ],

                                };
                            
                        

That's it! you can now run either of the commands below to pull all this together and get Tailwind CSS working in VitePress!

P U B L I S H E D